import 'dart:math';

import 'package:flutter/material.dart';
import 'package:kq_flutter_core_widget/utils/kq_screen_util.dart';
import 'package:kq_flutter_widgets/resources/kq_theme_colors.dart';
import 'package:kq_flutter_widgets/resources/l10n/kq_intl.dart';
import 'package:kq_flutter_core_widget/widgets/chart/axis/line/line_chart.dart';
import 'package:kq_flutter_core_widget/widgets/chart/kq_chart.dart';
import 'package:kq_flutter_widgets/widgets/titleBar/kq_title_bar.dart';

/// 折线图
class LineChartPage extends StatelessWidget {
  const LineChartPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: KqHeadBar(
        headTitle: '折线图',
        showBack: false,
      ),
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: Align(
              alignment: Alignment.center,
              child: buildLineChart(),
            ),
          ),
          SliverToBoxAdapter(
            child: Align(
              alignment: Alignment.center,
              child: buildLineChart3(),
            ),
          ),
          SliverToBoxAdapter(
            child: Align(
              alignment: Alignment.center,
              child: buildLineChart2(),
            ),
          ),
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.only(top: 60),
              child: Align(
                alignment: Alignment.center,
                child: Text(
                  "下面为两种无数据的展示方式：",
                  style: TextStyle(fontSize: 20.sp),
                ),
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Align(
              alignment: Alignment.center,
              child: buildEmptyLineChart2(),
            ),
          ),
          SliverToBoxAdapter(
            child: Align(
              alignment: Alignment.center,
              child: buildEmptyLineChart(),
            ),
          ),
          const SliverToBoxAdapter(
            child: SizedBox(
              height: 100,
            ),
          ),
        ],
      ),
    );
  }

  Widget buildLineChart() {
    List<LineEntity> entityList = [];
    int xLabelCount = 8;
    double yMin = 0;
    double yMax = 100;
    double avg = 0;
    for (int i = 0; i < xLabelCount; i++) {
      var value = yMin + Random().nextDouble() * (yMax - yMin);
      LineEntity entity = LineEntity(
          xIndex: i,
          value: value,
          labelGravity: i == 0
              ? LabelGravity.start
              : i == xLabelCount - 1
                  ? LabelGravity.end
                  : LabelGravity.center,
          labelOffset: 4.r,
          indicatorColor: const Color(0xFF106CF5),
          drawIndicator: true,
          label: '${value.toInt()}%');
      entityList.add(entity);

      avg += value;
    }

    List<AddedLine> addedLines = [];
    AddedLine addedLine = AddedLine(
        value: avg / entityList.length,
        lineDash: [3, 3],
        label: '测试数据',
        lineWidth: 2.r,
        lineColor: const Color(0xff5283C9));
    addedLines.add(addedLine);

    LineData lineData = LineData(
        values: entityList,
        lineWidth: 2.r,
        lineType: LineType.liner,
        fillBg: true,
        fillBgColors: const [Color(0x8040A9FF), Color(0x0040A9FF)],
        lineColors: const [
          Colors.yellow,
          Colors.red,
          Colors.grey,
          Colors.green
        ],
        addedLines: addedLines);

    Widget result = SizedBox(
      width: 400.r,
      height: 260.r,
      child: KqChart(
        delegate: KqLineChartDelegate.withDefault(
            xAxis: XAxis(
              gridLineWidth: 0.5.r,
              gridUseEndPadding: true,
              labelCount: xLabelCount,
              labelMaxLines: 2,
              labelOffsetAxis: 4.r,
              endPadding: 11.r,
              labelHorizontalPadding: 10,
              axisValueFormatter: (position) =>
                  Label(value: '${position + 1}月'),
            ),
            yAxis: YAxis(
                gridLineWidth: 0.5.r,
                gridUseEndPadding: true,
                labelMaxLines: 2,
                labelOffsetAxis: 4.r,
                endPadding: 11.r,
                labelMaxWidth: 38.r,
                labelMinWidth: 20.r,
                labelCount: 6,
                min: yMin,
                step: yMax / 5),
            dataRender: LineChartDataRender(
                highLightRender:
                    LineChartHighLightRender(lineWidth: 2.r, lineDash: [3, 3])),
            data: [lineData],
            animDuration: const Duration(seconds: 2)),
      ),
    );

    result = Padding(
      padding: const EdgeInsets.only(top: 20),
      child: result,
    );

    return result;
  }

  Widget buildLineChart2() {
    int xLabelCount = 12;
    double yMin = 0;
    double yMax = 100;

    List<LineData> lineDatas = [];
    for (int j = 0; j < 2; j++) {
      List<LineEntity> entityList = [];
      List<AddedLine> addedLines = [];
      for (int i = 0; i < xLabelCount; i++) {
        var value = yMin + Random().nextDouble() * (yMax - yMin);
        LineEntity entity = LineEntity(
            isDraw: !(j == 1 && i == 7),
            xIndex: i,
            value: value,
            lineStyle:
                i == 2 || i == 4 ? LineStyle.dottedLine : LineStyle.solidLine,
            labelGravity: i == 0
                ? LabelGravity.start
                : i == xLabelCount - 1
                    ? LabelGravity.end
                    : LabelGravity.center,
            labelOffset: 4.r,
            indicatorColor:
                j == 0 ? const Color(0xFF106CF5) : const Color(0xFFff0000),
            drawIndicator: true,
            label: '${value.toInt()}%');
        entityList.add(entity);
      }

      LineData lineData = LineData(
          values: entityList,
          lineWidth: 2.r,
          lineType: j == 0 ? LineType.horizontalBezier : LineType.liner,
          fillBg: true,
          fillBgColors:
              j == 0 ? const [Color(0x335283C9)] : const [Color(0x33BE3E38)],
          lineColors: j == 0 ? const [Color(0xFF106CF5)] : const [Colors.red],
          addedLines: addedLines);
      lineDatas.add(lineData);
    }

    Widget result = SizedBox(
      width: 400.r,
      height: 260.r,
      child: KqChart(
        delegate: KqLineChartDelegate.withDefault(
            xAxis: XAxis(
              gridLineWidth: 0.5.r,
              gridUseEndPadding: true,
              labelCount: xLabelCount,
              labelMaxLines: 2,
              labelOffsetAxis: 4.r,
              endPadding: 20.r,
              labelHorizontalPadding: 2,
              axisValueFormatter: (position) {
                if (position < 0) {
                  return Label(
                      value: "${position + 1}月",
                      weight: position % 2 == 0 ? 2 : 0);
                } else {
                  return Label(value: "${position + 1}月");
                }
              },
            ),
            yAxis: YAxis(
                gridLineWidth: 0.5.r,
                gridUseEndPadding: true,
                labelMaxLines: 2,
                labelOffsetAxis: 4.r,
                endPadding: 11.r,
                labelMaxWidth: 38.r,
                labelMinWidth: 20.r,
                labelCount: 6,
                min: yMin,
                step: yMax / 5),
            dataRender: LineChartDataRender(
                highLightRender:
                    LineChartHighLightRender(lineWidth: 2.r, lineDash: [3, 3])),
            data: lineDatas,
            animDuration: const Duration(seconds: 2)),
      ),
    );

    result = Padding(
      padding: const EdgeInsets.only(top: 60),
      child: result,
    );

    return result;
  }

  Widget buildLineChart3() {
    List<LineEntity> entityList = [];
    int xLabelCount = 8;
    double yMin = 0;
    double yMax = 100;
    for (int i = 0; i < xLabelCount; i++) {
      var value = yMin + Random().nextDouble() * (yMax - yMin);
      LineEntity entity = LineEntity(
          isDraw: i != 2 && i != 4,
          xIndex: i,
          value: value,
          drawLabel: true,
          labelGravity: i == 0
              ? LabelGravity.start
              : i == xLabelCount - 1
                  ? LabelGravity.end
                  : LabelGravity.center,
          labelOffset: 4.r,
          indicatorColor: const Color(0xFF106CF5),
          drawIndicator: true,
          label: '${value.toInt()}%');
      entityList.add(entity);
    }

    LineData lineData = LineData(
        values: entityList,
        lineWidth: 2.r,
        lineType: LineType.liner,
        fillBg: true,
        fillBgColors: const [Color(0x8040A9FF)],
        lineColors: const [Color(0xff5283C9)]);

    Widget result = SizedBox(
      width: 400.r,
      height: 260.r,
      child: KqChart(
        delegate: KqLineChartDelegate.withDefault(
            xAxis: XAxis(
              gridLineWidth: 0.5.r,
              gridUseEndPadding: true,
              labelCount: xLabelCount,
              labelMaxLines: 2,
              labelOffsetAxis: 4.r,
              endPadding: 11.r,
              labelHorizontalPadding: 10,
              axisValueFormatter: (position) =>
                  Label(value: '${position + 1}月'),
            ),
            yAxis: YAxis(
                gridLineWidth: 0.5.r,
                gridUseEndPadding: true,
                labelMaxLines: 2,
                labelOffsetAxis: 4.r,
                endPadding: 11.r,
                labelMaxWidth: 38.r,
                labelMinWidth: 20.r,
                labelCount: 6,
                min: yMin,
                step: yMax / 5),
            dataRender: LineChartDataRender(
                highLightRender:
                    LineChartHighLightRender(lineWidth: 2.r, lineDash: [3, 3])),
            data: [lineData],
            animDuration: const Duration(seconds: 2)),
      ),
    );

    result = Padding(
      padding: const EdgeInsets.only(top: 60),
      child: result,
    );

    return result;
  }

  Widget buildEmptyLineChart() {
    int xLabelCount = 8;
    double yMin = 0;
    double yMax = 100;
    Widget result = SizedBox(
      width: 400.r,
      height: 260.r,
      child: KqChart(
        delegate: KqLineChartDelegate(
            xAxis: XAxis(
              gridLineWidth: 0.5.r,
              gridUseEndPadding: true,
              labelCount: xLabelCount,
              labelMaxLines: 2,
              labelOffsetAxis: 4.r,
              endPadding: 11.r,
            ),
            yAxis: YAxis(
                gridLineWidth: 0.5.r,
                gridUseEndPadding: true,
                labelMaxLines: 2,
                labelOffsetAxis: 4.r,
                endPadding: 11.r,
                labelMaxWidth: 38.r,
                labelMinWidth: 20.r,
                labelCount: 6,
                min: yMin,
                step: yMax / 5),
            animDuration: const Duration(seconds: 2)),
      ),
    );

    result = Padding(
      padding: const EdgeInsets.only(top: 20),
      child: result,
    );

    return result;
  }

  Widget buildEmptyLineChart2() {
    Widget result = Container(
      width: 400.r,
      height: 260.r,
      color: Colors.lightBlue[200],
      child: KqChart(
        delegate: KqLineChartDelegate.withDefault(
          xAxis: XAxis(),
          yAxis: YAxis(),
          animDuration: const Duration(seconds: 2),
          emptyWidgetBuilder: () => Align(
            alignment: Alignment.center,
            child: Text(
              KqIntl.currentResource.noDataTip,
              style: TextStyle(fontSize: 12.sp, color: KqThemeColors.text59),
            ),
          ),
        ),
      ),
    );

    result = Padding(
      padding: const EdgeInsets.only(top: 60),
      child: result,
    );

    return result;
  }
}
